<!-- 任务卡片组件 -->
<script setup lang="ts">
import { MissionVO } from '@/api/mission/types';
import { MissionTypeNames, MissionPriorityNames, MissionStatusNames } from '@/api/mission/types';
import { useUserStore } from '@/store/modules/user';
import { Edit, Delete, Flag, User, CollectionTag, Document } from '@element-plus/icons-vue';
import { MISSION_STATUS } from '@/constants';

interface Props {
  mission: MissionVO;
  showActions?: boolean;
  draggable?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  showActions: true,
  draggable: false
});

const emit = defineEmits(['edit', 'delete']);

const userStore = useUserStore();
const isAdmin = computed(() => userStore.roles.includes('ADMIN'));

// 是否可以拖拽
const isDraggable = computed(() => props.draggable && isAdmin.value);

// 卡片拖拽开始
function handleDragStart(event: DragEvent) {
  if (isDraggable.value) {
    event.dataTransfer?.setData('text/plain', props.mission.id!.toString());
    event.dataTransfer!.effectAllowed = 'move';
  }
}

// 获取状态颜色类
const getStatusClass = (status: number) => {
  switch (status) {
    case MISSION_STATUS.NOT_STARTED:
      return 'status-pending';
    case MISSION_STATUS.IN_PROGRESS:
      return 'status-progress';
    case MISSION_STATUS.COMPLETED:
      return 'status-completed';
    case MISSION_STATUS.CLOSED:
      return 'status-closed';
    default:
      return 'status-pending';
  }
};

// 获取优先级颜色类
const getPriorityClass = (priority: number) => {
  switch (priority) {
    case 1: // 高
      return 'priority-high';
    case 2: // 中
      return 'priority-medium';
    case 3: // 低
      return 'priority-low';
    default:
      return 'priority-medium';
  }
};

// 获取类型颜色类
const getTypeClass = (type: number) => {
  switch (type) {
    case 1: // 新功能
      return 'type-feature';
    case 2: // 优化
      return 'type-optimization';
    case 3: // Bug修复
      return 'type-bug';
    case 4: // 其他
      return 'type-other';
    default:
      return 'type-other';
  }
};
</script>

<template>
  <div
    class="mission-card"
    :class="[getStatusClass(mission.status!), { draggable: isDraggable }]"
    :draggable="isDraggable"
    @dragstart="handleDragStart"
    @click="$emit('edit', mission)"
  >
    <!-- 卡片头部 -->
    <div class="card-header">
      <div class="card-title">
        <h4 class="title">
          {{ mission.missionTitle }}
        </h4>
        <div class="card-tags">
          <span :class="['tag', 'type-tag', getTypeClass(mission.missionType!)]">
            {{ MissionTypeNames[mission.missionType!] }}
          </span>
          <span :class="['tag', 'priority-tag', getPriorityClass(mission.priority!)]">
            <el-icon><flag /></el-icon>
            {{ MissionPriorityNames[mission.priority!] }}
          </span>
        </div>
      </div>
    </div>

    <!-- 卡片内容 -->
    <div class="card-content">
      <!-- 任务描述 -->
      <div v-if="mission.missionDescription" class="description">
        <p>{{ mission.missionDescription }}</p>
      </div>

      <!-- 版本信息 -->
      <div v-if="mission.version" class="version-info">
        <el-icon><collection-tag /></el-icon>
        <span>目标版本: {{ mission.version }}</span>
      </div>

      <!-- 需求描述 -->
      <div v-if="mission.requirements" class="requirements">
        <div class="requirements-header">
          <el-icon><document /></el-icon>
          <span>需求说明</span>
        </div>
        <p class="requirements-text">
          {{ mission.requirements }}
        </p>
      </div>
    </div>

    <!-- 卡片底部 -->
    <div class="card-footer">
      <div class="author-info">
        <div class="author-avatar">
          <el-icon><user /></el-icon>
        </div>
        <div class="author-details">
          <span class="author-name">{{ mission.createByName }}</span>
          <span class="create-time">{{ mission.createTime }}</span>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div v-if="showActions && isAdmin" class="actions">
        <el-button
          size="small"
          type="danger"
          :icon="Delete"
          circle
          @click.stop="$emit('delete', mission.id)"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.mission-card {
  background: white;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mission-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #3b82f6;
}

.mission-card.draggable {
  cursor: move;
}

.mission-card.draggable:active {
  opacity: 0.8;
  transform: rotate(2deg);
}

/* 状态样式 */
.status-pending {
  border-left: 4px solid #909399;
}

.status-progress {
  border-left: 4px solid #409eff;
}

.status-completed {
  border-left: 4px solid #67c23a;
  background: linear-gradient(to right, #f0f9ff, #ffffff);
}

.status-closed {
  border-left: 4px solid #f56c6c;
  background: linear-gradient(to right, #fef2f2, #ffffff);
}

/* 卡片头部 */
.card-header {
  margin-bottom: 12px;
}

.card-title {
  margin-bottom: 8px;
}

.title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

/* 类型标签样式 */
.type-feature {
  background: #f0f9ff;
  color: #1890ff;
  border: 1px solid #b3d8ff;
}

.type-optimization {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.type-bug {
  background: #fff2e8;
  color: #fa8c16;
  border: 1px solid #ffd591;
}

.type-other {
  background: #f4f4f5;
  color: #909399;
  border: 1px solid #d3d4d6;
}

/* 优先级标签样式 */
.priority-high {
  background: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fbc4c4;
}

.priority-medium {
  background: #fdf6ec;
  color: #e6a23c;
  border: 1px solid #f5dab1;
}

.priority-low {
  background: #f4f4f5;
  color: #909399;
  border: 1px solid #d3d4d6;
}

/* 卡片内容 */
.card-content {
  margin-bottom: 12px;
}

.description {
  margin-bottom: 12px;
}

.description p {
  margin: 0;
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.version-info {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 4px;
  font-size: 13px;
  color: #666;
}

.version-info .el-icon {
  color: #409eff;
  font-size: 14px;
}

.requirements {
  margin-bottom: 8px;
}

.requirements-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #303133;
}

.requirements-header .el-icon {
  color: #909399;
}

.requirements-text {
  margin: 0;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  line-height: 1.4;
  border: 1px solid #e4e7ed;
}

/* 卡片底部 */
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.author-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.author-name {
  font-size: 13px;
  font-weight: 500;
  color: #303133;
}

.create-time {
  font-size: 12px;
  color: #c0c4cc;
}

.actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .mission-card {
    padding: 12px;
  }

  .title {
    font-size: 15px;
  }

  .card-footer {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .actions {
    width: 100%;
    justify-content: space-between;
  }

  .description p {
    -webkit-line-clamp: 2;
  }
}
</style>
